<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_指令_自定义指令</title>
</head>
<body>

<!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive': function(el, binding) {
      el.innerHTML = binding.value.toupperCase()
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写  v-upper-text
  2. 功能类型于v-text, 但转换为全小写  v-lower-text
-->
<div id="test">
  <p v-text="msg"></p>
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="test2">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">

  // 定义全局指令 ==> 所有模板中都可以使用
  /* 
  el: 指令属性所在的标签对象
  binding: 包含指令相关信息数据的对象
  */
  Vue.directive('upper-text', function (el, binding) {
    console.log('upper-text', el, binding)
    el.textContent = binding.value.toUpperCase()
  })

  new Vue({
    el: '#test',
    data: {
      msg: 'NBA I Love This Game!'
    },

    directives: { //定义局部指令 ==> 只能在当前vm管理的模板中使用
      'lower-text' (el, binding) {
        el.textContent = binding.value.toLowerCase()
      }
    }
  })

  new Vue({
    el: '#test2',
    data: {
      msg: 'CBA I Love This Game!'
    },
  })
</script>
</body>
</html>